<template>
	<div :class="navMenuStateA?'nav_bar navOpen':'nav_bar'">
		<!-- 顶部菜单 -->
    <!-- background: url(/vueElementAdmin/static/img/jwtbg1.88d4718.png) no-repeat; background-size: 100% 100%; -->
		<div class="header" :style="systemThemeImage!=''?'background: url('+systemThemeImage+') no-repeat; background-size: 100% 100%;':'background:#b70000;'">
			<div class="top_nav" @mouseover="mouseLeave()" > 
				<div class="top_lf_nav clearfix">
					<div class="nav_btn fl" 
						@click="navMenuStateOn()" 
					>
						<img :src="imgHost+'nav_icon.png'" alt="">
						<p>菜单</p>
					</div>
					<p class="line"></p>
					<div class="logo fl">
						<img v-if="logoImg==''" src="@/assets/images/logo.png" alt="">
                       <img v-else :src="logoImg" alt="">
					</div>
				</div>
				<div class="top_lr_nav">
					<i @click="searchState = !searchState" class="el-icon-search"></i>
					<el-input v-model="searchKey" v-popover:popover4 :class="searchState?'show_width':'hide_width'" placeholder="请输入关键字搜索"></el-input>
					<i class="el-icon-question" v-popover:popover3></i>
					<i class="el-icon-message"  v-popover:popover2></i>
					<i class="el-icon-share" v-popover:popover1></i>
					<el-popover ref="popover1" placement="top-start" title="移动端下载二维码" width="80" trigger="hover">
						<img style="" src="http://image.pingyuntech.com/pingyuntechPC/qr-code.png" class="qr-code">
					</el-popover>
					<el-popover ref="popover2" placement="top-start" width="250" trigger="hover" class="msg_center">
						<el-tabs v-model="msgTypeName" @tab-click="changeMsgType">
						    <el-tab-pane v-for="item in msgTypeList" :label="item.label" :name="item.name" :key="item.id"></el-tab-pane>
						</el-tabs>
						<el-collapse accordion>
							<el-collapse-item  v-for="(item, index) in msgList" v-if="index < 5" :key="index" :title="item.msgTitle" :name="item.msgId">
								<div class="ellipsis-2">{{item.msgContent}}</div>
							</el-collapse-item>
						</el-collapse>
						<el-link @click="seeMoreMsg()" :underline="false" class="go_more">查看{{msgList.length}}条新{{msgTypeName}}</el-link>
					</el-popover>
					<el-popover ref="popover3" placement="top-start" title="帮助中心" width="90" trigger="hover" content="该功能开发中~">
					</el-popover>
					<el-popover ref="popover4" placement="top-start" width="204" trigger="click">
						<div class="clearfix search_tips">
							<p class="fl tips">最近搜索</p>
							<p @click="searchOld = []" class="fr"><i class="el-icon-close"></i></p>
						</div>
						<ul class="search_record">
							<li v-for="(searchItem, searchIndex) in searchOld" :key="searchIndex"><el-link :underline="false">{{searchItem}}</el-link></li>
						</ul>
					</el-popover>
					<img src="@/assets/images/pic.png"/>
					<el-dropdown class="identity" @command="handleCommand" >
						<span class="el-dropdown-link">
						   <span v-if="userInfo.userName!='系统管理员'"> {{menuName}} -</span>
               {{userInfo.userName}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item,index) in UserRoleList" :key="index" :command="item.id" >{{item.name!='role:root'?item.name:'系统管理员'}}</el-dropdown-item>
							<!-- <el-dropdown-item>党员身份</el-dropdown-item> -->
							<el-dropdown-item command="outLogin" divided>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
    <div class="topNav clearfix">
      <ul class="fl">
        <li class="topNavItem">
			<!-- :class="$store.state.navName=='index'?'item cur':'item'" -->
          <p  class="item" @click="openUrl('/')" @mouseover="mouseOver(-1)">首页</p>
        </li>
        <li class="topNavItem" v-for="(item1, index1) in navList1" :key="index1" @mouseover="mouseOver(index1)" v-if="item1.menuShow||userAdmin">
			<!-- $store.state.navName==item1.name?'item cur': 'item'-->
          <p class="item" @click="openUrl(item1.url)">{{item1.name}}<span class="angle" v-if=" (indexshu === index1) && item1.children.length > 0 && showMask" /></p>
        </li>
      </ul>
    </div>
		<div ref="topNavBox" class="topNavBox" :style="{top: navList1[indexshu] && navList1[indexshu].children && showMask ? '92px' : '-300px'}">
			<ul class="topNav01">
				<li class="nav01Title" v-for="(item2, index2) in (navList1[indexshu] ? navList1[indexshu].children : [])" :key="index2" v-if="item2.menuShow||userAdmin">
					<div class="itemTxet" :style="{cursor: item2.children && 'pointer'}" @click="openUrl(item2.url)">{{item2.name}}</div>
					<ul>
						<li class="listDisc" v-for="(item3, index3) in item2.children" @click="openUrl(item3.url,item3.name)" :key="index3" v-if="item3.menuShow||userAdmin">{{item3.name}}
              <ul v-if="item3.children">
								<li class="listDisc4" v-for="(item4, index4) in item3.children" :key="index4" @click="openUrl(item4.url)"  v-if="item4.menuShow||userAdmin">{{item4.name}}</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
			<div @mouseover="mouseLeave()" v-if="indexshu !== '' && showMask && navList1[indexshu].children" :style="{ top: topNavHeight + 'px'}" class="mask" />
      <!-- height: maskHeight + 'px', -->
		</div>
		<div class="leftNav all_tri4s" :style="navMenuStateA?'':'left:-181px;'">
			<ul class="nav01" @mouseleave="txetLeave()">
				<li class="nav01Title" v-for="(item1, index1) in navList1" :key="index1">
					<p class="itemTxet" @mouseover="txetOver01(index1)">
						{{item1.name}}
						<i v-show="item1.children" class="el-icon-arrow-right"></i>
						
						<ul class="nav02" v-show="item1.children&&(txet01===index1)" @mouseleave="txetLeave01()">
							<li class="nav02Title" v-for="(item2, index2) in item1.children" :key="index2">
								<p class="itemTxet" @mouseover="txetOver02(index2)">
									{{item2.name}}
									<i v-show="item2.children" class="el-icon-arrow-right"></i>
									<ul class="nav03" v-show="item2.children&&(txet02===index2)">
										<li class="nav03Title" v-for="(item3, index3) in item2.children" :key="index3">
											<p class="itemTxet" @click="openUrl(item3.url)">
												{{item3.name}}
											</p>
										</li>
									</ul>
								</p>
							</li>
						</ul>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import menuApi from "@/api/shiroAdmin";
export default {
  data() {
    return {
      logoImg:'',//自定义logo
      systemThemeImage:'',//自定义背景
      imgHost: this.$baseData.imgHost,
      imgAssets: this.$baseData.imgAssets,
      userInfo: [],
      indexshu: "",
      showMask: false,
      searchKey: "",
      searchState: false,
      navList1: [],
      navMenuStateA: false,
      txet01: "",
      txet02: "",
      searchOld: [
        "最近搜索记录1",
        "最近搜索记录2",
        "最近搜索记录3最近搜索记录3最近搜索记录3最近搜索记录3最近搜索记录3",
        "最近搜索记录4",
        "最近搜索记录5",
      ],
      msgTypeName: "公告",
      msgTypeIndex: 0,
      msgTypeList: [
        { label: "公告", name: "公告", id: 1 },
        { label: "待办", name: "待办", id: 2 },
        { label: "逾期", name: "逾期", id: 3 },
      ],
      msgList: [
        {
          msgId: 1,
          msgTitle: "公告测试标题1",
          msgContent:
            "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
        },
        {
          msgId: 2,
          msgTitle: "公告测试标题2",
          msgContent:
            "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
        },
        {
          msgId: 3,
          msgTitle: "公告测试标题3",
          msgContent:
            "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
        },
      ],
      userNav:[],
      userAdmin:false,
      menuName:'',
      UserRoleList:[]
    };
  },
  computed: {
    topNavHeight() {
      let headerTop = document.documentElement.querySelector(".top_nav")
        .clientHeight;
      return headerTop;
    },
    maskHeight() {
      let clientHeight = document.documentElement.clientHeight;
      let headerTop = document.documentElement.querySelector(".top_nav")
        .clientHeight;
      return clientHeight - headerTop;
    },
  },
  methods: {
    //递归数组
    getMenuBtnList (menuTreeList) {
      let that=this
      for (let item of menuTreeList) {
          if (that.userNav.includes(item.id)) {
            item.menuShow=true
            if (item.children&&item.children.length > 0 ) {
              this.getMenuBtnList(item.children, that.menuList);
            }
          } else if (item.children&&item.children.length > 0 ) {
            this.getMenuBtnList(item.children, that.menuList);
          }
      }
     
    },
    getUserRoleList(){
      let that = this;
      let data = {};
      that.$http.get(menuApi.getUserRoleList, data).then((res) => {
        that.UserRoleList=res.data.data
      })
    },
    getchangeUserRoleID(roleId){
      let that = this;
      that.navList1=[]
      let data = {
        userId:that.userInfo.userId,
        roleId:roleId
      };
      that.$http.post(menuApi.changeUserRoleID+'?userId='+that.userInfo.userId+'&roleId='+roleId, data).then((res) => {
       
        if(that.$route.path=='/'){
          that.$router.go(0) 
        }else{
           var timestamp = new Date().getTime()/1000
            that.openUrl('/')
             that.$router.go(0) 
        }
        //that.$router.go(0) 
        // var timestamp = new Date().getTime()/1000
        // that.openUrl('/?time='+timestamp)
         // that.getUserRole()
      })
    },
    getUserRole(){
      let that = this;
      let data = {};
      that.$http.get(menuApi.getUserRole, data).then((res) => {
        //获取对应角色的菜单
         if(JSON.stringify(res.data.data)!='null'){
          res.data.data.resourcesVoList.map(item=>{
              that.userNav.push(item.id)
          })
          that.getMenuBtnList(that.navList1)
          let data=JSON.stringify(that.navList1)
          that.navList1=JSON.parse(data)
          that.menuName=res.data.data.name
          // 存储用户角色信息
          localStorage.setItem('userRole',JSON.stringify(res.data.data.userRole));
         }else{
            that.userAdmin=true
          localStorage.setItem('userRole','null');
         }
         
        
      });
    },
     getData() {
      let that = this;
      let data = {};
      that.$http
        .get(menuApi.detailParams + "?id=1", data)
        .then((res) => {
          console.log(res.data)
            if(res.data){
                that.logoImg=res.data.systemLogo
                that.systemThemeImage=res.data.systemThemeImage
            }
        });
    },
    //点击菜单项触发的事件回调
    handleCommand(command) {
      console.log('command',command)
      this.getRoleType(command);  //获取用户角色类型
      if (command == "outLogin") {
        localStorage.clear();
        this.$router.push({ path: "/login" });
      }else{
        this.getchangeUserRoleID(command)
      }
    },
    getRoleType(roleId){
      let data={roleId}
      this.$http.get(menuApi.getRoleType,data).then(res=>{
        console.log('用户角色',res)
        if(res.data.status==200){
          // userRole  1党委，2党总支，3支部，4其他
          let userRole=res.data.data
          // 存储用户角色信息
          localStorage.setItem('userRole',JSON.stringify(userRole));
        }
      })

    },
    // 移入
    txetOver01(i) {
      this.txet01 = i;
    },
    txetOver02(i) {
      this.txet02 = i;
    },
    // 移出
    txetLeave() {
      this.txet01 = "";
      this.txet02 = "";
      this.navMenuStateA = false;
    },
    topNavLeave() {
      this.indexshu = "";
      this.navMenuStateA = false;
      this.showMask = false;
    },
    txetLeave01() {
      this.txet02 = "";
    },
    navMenuStateOn() {
      this.navMenuStateA = true;
    },
    openUrl(url, name) {
      console.log('navbar',url, name);
      if (url === this.$route.path) {
        return;
      }
      if (name == "消息中心管理" || name == "意见反馈") {
        return;
      }

      if (url != "") {
        this.txetLeave();
        this.$router.push({ path: url });
      } else {
        if (this.$route.path !== "/404") {
          this.$router.push({ path: "/404" });
        } else {
          return;
        }
      }
      this.showMask = false;
    },
    // 移入
    mouseOver(i) {
      console.log("当前区域" + i);
      if (this.navList1[i] && this.navList1[i].children) {
        this.showMask = true;
        this.indexshu = i;
      } else {
        this.showMask = false;
      }
    },
    // 移出
    mouseLeave() {
      this.showMask = false;
    },
    changeMsgType(tab, event) {
      console.log(tab);
      this.msgTypeName = tab.label;
      this.msgTypeIndex = tab.index;
      if (tab.label == "公告") {
        this.msgList = [
          {
            msgId: 1,
            msgTitle: "公告测试标题1",
            msgContent:
              "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
          },
          {
            msgId: 2,
            msgTitle: "公告测试标题2",
            msgContent:
              "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
          },
          {
            msgId: 3,
            msgTitle: "公告测试标题3",
            msgContent:
              "公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情公告内容详情",
          },
        ];
      } else if (tab.label == "待办") {
        this.msgList = [
          {
            msgId: 1,
            msgTitle: "待办测试标题1",
            msgContent:
              "待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情",
          },
          {
            msgId: 2,
            msgTitle: "待办测试标题2",
            msgContent:
              "待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情",
          },
          {
            msgId: 3,
            msgTitle: "待办测试标题3",
            msgContent: "待办内容详情待办内容详情",
          },
          {
            msgId: 4,
            msgTitle: "待办测试标题4",
            msgContent:
              "待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情",
          },
          {
            msgId: 5,
            msgTitle: "待办测试标题5",
            msgContent: "待办内容详情待办内容详情",
          },
          {
            msgId: 6,
            msgTitle: "待办测试标题6",
            msgContent:
              "待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情待办内容详情",
          },
        ];
      } else {
        this.msgList = [
          {
            msgId: 1,
            msgTitle: "逾期测试标题1",
            msgContent:
              "逾期内容详情逾期内容详情逾期内容详情逾期内容详情逾期内容详情逾期内容详情",
          },
          {
            msgId: 2,
            msgTitle: "逾期测试标题2",
            msgContent: "逾期内容详情逾期内容详情逾期内容详情逾期内容详情",
          },
        ];
      }
    },
    seeMoreMsg() {
      this.$router.push({
        path: `/centerMsg/msgList/${this.msgTypeIndex}`,
      });
    },
    getList() {
      let that = this;
      let data = {
        pageSize: "",
        pageNumber: "",
        sortOrder: "asc",
      };
      that.$http.post(menuApi.listTree, data).then((res) => {
        console.log('listTree',res)
        // that.navList1 = res.data.data;
        that.getUserRole()
      });
    },
  },
  mounted() {
    this.getUserRoleList()
    this.getList();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getData()
    let navData=[
    		{
    			name: '我的组件库',
     			id:68,
     			url:'',
                type: "menu",
                 checked: "false",
                  hashNext: true,
    			 children:[
                     {
    			  name: '组件库管理',
    			  url:'',
                  type: "menu",
                  id: 69,
                  parent_id:68,
                  hashNext: true,
                  checked: "false",
    			  children:[
    					{
    					 name: '自定义拖拽组件',
    					 url:'/indexForm',
                         id:71,
                          type: "menu",
                          parent_id:69,
                          hashNext: false,
                         checked: "false",
    					},
    					{
    						name: '自定义table',
    						url:'/table',
                            id:76,
                            type: "menu",
                            parent_id:69,
                            hashNext: false,
                            checked: "false",
    					},
    					{
    						name: '自定义表单组件',
    						url:'/diyForm',
                            id:77,
                            type: "menu",
                            parent_id:69,
                            hashNext: false,
                            checked: "false",
    					},
    				]
                     },
                     {
    				name: '通用界面',
                    url:'',
                    id:79,
                    type: "menu",
                    checked: "false",
                    hashNext: true,
    			 	children:[
    					{
    						 name: '404',
    						 url:'/404',
                             id:80,
                             type: "menu",
                             parent_id:68,
                             hashNext: false,
                             checked: "false",
    			   		}
    				  ]
                    },
                    ]
    		},
    		
        ]
        
  localStorage.setItem('navList',JSON.stringify(navData));//设置菜单缓存
  this.navList1=navData
  },
};
</script>

<style  lang="less"  scoped>
.listDisc4 {
  margin-left: 10px;
  list-style: none;
}
.top_lr_nav {
  float: right;
  color: #fff;
  position: relative;
  top: 10px;
}
.top_lr_nav .topSearch {
  width: 200px;
  margin-right: 20px;
}
.top_lr_nav .identity {
  color: #fff;
  cursor:pointer;
}
.show_width {
  padding: 0 10px;
  width: 210px;
  transition: width 0.2s;
  border-bottom: 1px solid #ffffff;
}
.hide_width {
  width: 0px;
  transition: width 0.2s;
  border-bottom: 1px solid #ffffff;
}
/deep/ .el-input__inner {
  border: none;
  background: transparent;
  border-radius: 0;
  height: 26px;
  line-height: 26px;
  color: #ffffff;
  padding: 0px;
}
/deep/ .el-input__inner::-webkit-input-placeholder {
  color: #ffffff;
}
/deep/ .el-input__inner::-moz-input-placeholder {
  color: #ffffff;
}
/deep/ .el-input__inner::-ms-input-placeholder {
  color: #ffffff;
}
.search_tips .tips {
  font-size: 14px;
  color: #333333;
}
.search_tips i {
  font-size: 18px;
  color: #333333;
}
.search_record li {
  font-size: 12px;
  padding: 4px 0;
}
.top_lr_nav img {
  width: 30px;
  height: 30px;
  padding: 0 10px 0 10px;
  position: relative;
  top: -5px;
}
.top_lr_nav i {
  color: #fff;
  font-size: 16px;
  padding: 0 5px;
  cursor: pointer;
}
.topNav01 {
  position: relative;
  width: 100%;
  min-height: 200px;
  z-index: 999;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
}
.nav_bar {
  z-index: 999;
  position: relative;
}
.angle {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 32px;
  left: 50%;
  margin-left: -4px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: transparent transparent white;
}
.topNav01 .item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topNav01 .nav01Title .itemTxet {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  color: #666;
  border-bottom: 1px solid #ededed;
}
.topNav01 .nav01Title {
  text-align: left;
  margin: 0 30px;
  padding: 20px 0;
}

.topNav01 .nav01Title li {
  cursor: pointer;
  color: #999;
  font-size: 14px;
  line-height: 1.7rem;
}

.topNav01 .nav01Title li:hover {
  color: #666;
}
.navOpen::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 56px;
  z-index: 998;
}
.leftNav,
.leftNav ul.nav02,
.leftNav ul.nav03 {
  position: fixed;
  top: 56px;
  background: #fff;
  z-index: 999;
  bottom: 0;
  text-align: left;
  left: 0;
}
.leftNav .itemTxet i {
  float: right;
  margin-top: 10px;
  color: #ccc;
}
.leftNav ul.nav01,
.leftNav ul.nav02,
.leftNav ul.nav03 {
  width: 180px;
  padding-top: 20px;
  border-right: 1px solid #ededed;
  height: 100%;
}
.leftNav ul.nav01 li.nav01Title,
.leftNav ul.nav02 li.nav02Title,
.leftNav ul.nav03 li.nav03Title {
  line-height: 40px;
  height: 40px;
  padding-left: 20px;
  padding-right: 10px;
  cursor: pointer;
  color: #666;
}
.leftNav ul.nav01 li.nav01Title:hover,
.leftNav ul.nav02 li.nav02Title:hover,
.leftNav ul.nav03 li.nav03Title:hover {
  background: #ededed;
}
.leftNav ul.nav02 {
  left: 181px;
}
.leftNav ul.nav03 {
  left: 362px;
}
.navList {
  position: absolute;
  background: #fff;
  top: 50px;
  padding: 15px;
  width: max-content;
  border: 1px solid #ededed;
  border-radius: 3px;
  z-index: 999;
}
.navList ul {
  float: left;
  margin: 10px;
}
.navList ul li {
  min-width: 180px;
  text-align: left;
  position: relative;
}
.navList .title0 {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
  margin-bottom: 7px;
}
.navList p.titleNav {
  color: #666;
  line-height: 25px;
  font-size: 12px;
  cursor: pointer;
}
.top_nav {
  position: relative;
  padding: 6px 20px 36px;
  height: 50px;
  font-size: 0;
}
.top_lf_nav,
.top_lf_nav p {
  float: left;
  position: relative;
  top: 3px;
}
.nav_btn {
  padding-right: 10px;
}
.nav_btn img {
  float: left;
  margin-top: 13px;
  width: 15px;
  height: 14px;
  cursor: pointer;
}
.nav_btn p {
  padding-left: 8px;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
.line {
  width: 1px;
  height: 16px;
  margin: 8px 20px 12px 10px;
  background: rgba(255, 255, 255, 0.2);
}
.logo img {
  height: 20px;
  margin-top: 6px;
  cursor: pointer;
}
.topNav {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 3;
  top: 56px;
  left: 0;
  width: 100%;
}
.topNav li {
  float: left;
  position: relative;
}
.topNav .item {
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  cursor: pointer;
}
.topNav .item.cur {
  background: rgba(0, 0, 0, 0.2);
}
.z_index_100 {
  z-index: 100;
}
.z_index_99 {
  z-index: 99;
}
.nav_menu_arise_01 {
  animation: nav_animation_01 0.2s;
}
.nav_menu_arise_02 {
  animation: nav_animation_02 0.4s;
}
.mask {
  position: fixed;
  width: 100%;
  height:100vh;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 998;
}
.header {
  position: relative;
  z-index: 2;
  
}
.topNavBox {
  width: 100%;
  z-index: 1;
  position: absolute;
  top: -300px;
  left: 0;
  transition: 0.3s all ease-in;
}
.topNav01 .nav01Title .listDisc {
  list-style-type: disc;
  margin-left: 15px;
}
.topNav01 .nav01Title ul {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
@keyframes nav_animation_01 {
  0% {
    left: -200px;
  }
  100% {
    left: 0px;
  }
}
@keyframes nav_animation_02 {
  0% {
    left: -400px;
  }
  100% {
    left: 200px;
  }
}
.go_more {
  width: 100%;
}
/deep/ .el-tabs__header {
  margin: 0;
}
/deep/ .el-tabs__nav {
  width: 100%;
}
/deep/ .el-tabs__item {
  padding: 0;
  width: 33.3%;
  text-align: center;
}
.go_more {
  width: 100%;
  margin-top: 12px;
}
/deep/ .el-tabs__active-bar {
  width: 33.3% !important;
}
</style>
